<template>
  <div class="box">
    <Hand title="支付密码修改" :left="true" :iconbool="false" @back="backPrve">
      <p class="p" @click="goFather">提交</p>
    </Hand>
    <van-form class="form">
      <van-cell-group inset>
        <van-field
          v-model="username"
          name="原手机号"
          label="原手机号"
          placeholder="188-0234-111"
          :rules="[{ required: true, message: '请填写原手机号' }]"
        />
        <!-- <span class="span">发送验证码</span> -->
        <van-field
          v-model="password1"
          name="原手机密码"
          label="原手机密码"
          placeholder="请输入原始密码"
          :rules="[{ required: true, message: '请填写原始密码' }]"
        />
        <van-field
          v-model="password2"
          name="修改密码"
          label="修改密码"
          placeholder="修改密码"
          :rules="[{ required: true, message: '请填写修改密码' }]"
        />
        <van-field
          v-model="password3"
          name="确认修改密码"
          label="确认修改密码"
          placeholder="确认修改密码"
          :rules="[{ required: true, message: '请确认修改密码' }]"
        />
      </van-cell-group>
    </van-form>
    <van-cell title="免密支付" class="cell">
      <template #right-icon>
        <van-switch v-model="checked" />
      </template>
    </van-cell>
    <van-cell
      title="免密支付开启后在支付时将不再验证支付密码，可直接进行支付操作。"
      class="cell1"
    >
    </van-cell>
  </div>
</template>

<script setup>
import Hand from "../../components/Hand.vue";
import { useRouter } from "vue-router";
import { ref } from "vue";
import { showSuccessToast, showFailToast } from "vant";
// 引入 api
import { updatepassword } from "../../api/index.js";
import { showConfirmDialog } from "vant";

const username = ref(localStorage.etel);
const password = ref("");
const password1 = ref("");
const password2 = ref("");
const password3 = ref("");
const checked = ref(false);
const router = useRouter();
// 修改密码测试
// updatepassword(1, "admin", "admin")
//   .then((res) => {
//     console.log(res);
//   })
//   .catch((error) => {
//     console.log(error);
//   });

const backPrve = () => {
  router.go(-1);
};
const goFather = () => {
  console.log(password2.value);
  if (
    password1.value != "" &&
    password2.value != "" &&
    username.value != "" &&
    password3.value != "" &&
    password2.value == password3.value
  ) {
    showConfirmDialog({
      message: "你确定要修改支付密码吗??",
    })
      .then(() => {
        const eId = localStorage.token;
        // 修改支付密码
        updatepassword(eId, password3.value, password1.value)
          .then((res) => {
            if (res.data.message == "失败") {
              showFailToast("修改失败");
            } else {
              showSuccessToast("修改成功");
            }
            router.push("/SetUp");
            // console.log(res);
          })
          .catch((error) => {
            // console.log(error);
          });
        // router.push("/SetUp");
      })
      .catch(() => {});
  } else {
    showFailToast("信息未完善或两次密码不一致");
  }
};
</script>

<style scoped>
.box {
  display: flex;
  flex-direction: column;
  background: #ecfdfa;
  height: 100vh;
}

.p {
  font-family: "微软雅黑 Bold", "微软雅黑 Regular", "微软雅黑";
  font-weight: 700;
  font-size: 20px;
  color: #ffffff;
}

.form {
  margin-top: 5.333vw;
  position: relative;
}

.span {
  position: absolute;
  top: 3.333vw;
  right: 12.333vw;
  color: red;
  font-weight: normal;
  font-size: 2.667vw;
}
.cell {
  width: 92vw;
  margin: 4.333vw 4vw 0vw 4vw;
  border-top-left-radius: 2.667vw;
  border-top-right-radius: 2.667vw;
}
.cell1 {
  width: 92vw;
  border-bottom-left-radius: 2.667vw;
  border-bottom-right-radius: 2.667vw;
  margin: 0vw 4vw;
  font-family: "微软雅黑";
  font-weight: 400;
  font-style: normal;
  font-size: 12px;
  color: #cccccc;
}
</style>
